<template>
<CNTable 
:tableData="tableData"
:tablePropsFormat="tablePropsFormat"
:border="true"
:emptyText="'暂无数据'"
:maxHeight="500"
:headerCellStyle="{'backgroundColor':'#333',color:'red','text-align':'center'}"
@edit="edit"
@delete="Delete"/>
</template>

<script setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
// 按这个prop顺序排序表格
// 留一个属性别设置width让其自适应占据剩余空间
const tablePropsFormat=[
    {prop:'name',label:'Name',width:'180'},
    {prop:'address',label:'Address',align:'center'},
    {prop:'date',label:'Date',width:'180'},
    {emit:true,label:'操作',fixed:'right',operates:
        [
            {operate:'编辑',emitType:'edit'},
            {operate:'删除',type:'primary',isText:true,emitType:'delete'},
        ]
    }
]

const edit=(row)=>{
    console.log(row);
}
const Delete=(row)=>{
    console.log(row);
}
</script>

<style lang="scss" scoped>

</style>